<template>
  <div style="text-align: left">
    <h1 style="text-align: left">
      <img src="../../assets/img/config.png" style="width: 25px;height: 25px" flex>
      网站配置
    </h1>
    <hr style="margin-top: 10px">
    <div class="content-div">
      <div style="height: 30px"></div>
      <div class="button_div" style="width: 100%;margin-left: 23%;" flex>
        <el-button type="primary" icon="el-icon-plus" @click="addConfig">添加配置</el-button>
        <el-button type="primary" icon="el-icon-refresh" style="margin-left: 10%" @click="refreshTable">刷新列表</el-button>
        <el-button type="primary" icon="el-icon-edit" style="margin-left: 10%" @click="updateRSA">获取RSA秘钥对</el-button>
      </div>
      <div style="height: 5%"></div>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="ID"
          type="index"
          width="180">
        </el-table-column>
        <el-table-column
          label="名称"
          width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="描述"
          width="180">
          <template slot-scope="scope">
                <el-tag size="medium">{{ scope.row.description }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--添加配置弹出层-->

      <el-dialog title="修改配置" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="值" :label-width="formLabelWidth">
            <el-input v-model="form.value" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="描述" :label-width="formLabelWidth">
            <el-input v-model="form.description" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="info" @click="dialogFormVisible_esc">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible_ok">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="秘钥信息" :visible.sync="RSAInfo">
        <el-form :model="form2">
        <el-form-item label="公钥">
          <el-input
            type="textarea"
            :rows="2"
            v-model="form2.publicKey">
          </el-input>
        </el-form-item>
        <el-form-item label="私钥">
          <el-input
            type="textarea"
            :rows="2"
            v-model="form2.privateKey">
          </el-input>
        </el-form-item>
        </el-form>
      </el-dialog>


    <el-dialog title="添加配置" :visible.sync="dialogFormVisible2">
      <el-form :model="form3">
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="form3.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="值" :label-width="formLabelWidth">
          <el-input v-model="form3.value" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="描述" :label-width="formLabelWidth">
          <el-input v-model="form3.description" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="info" @click="dialogFormVisible2_esc">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible2_ok">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>



<script>
  export default {
    data() {
      return {
        tableData: [

        ],
        form: {
          id:'',
          name: '',
          value:'',
          description:'',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        form2:{
          publicKey:'',
          privateKey:''
        },
        dialogFormVisible2:false,
        dialogFormVisible: false,
        RSAInfo:false,
        form3: {
          id:'',
          name: '',
          value:'',
          description:'',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }

      }
    },
    created(){
      this.refreshTable();
    },
    methods: {
      handleEdit(index, row) {
        this.dialogFormVisible = true;
        this.form = row
      },
      handleDelete(index, row) {
        this.$api.deleteConfig({id:row.id}).then(res => {
          console.log(row.id)
          if (res.code === '000000'){
            this.$message.success("删除成功！")
            this.refreshTable()
          }
        })
      },
      refreshTable(){
        this.$api.getConfigList().then(res => {
          if (res.code === '000000'){
            this.tableData = res.data
            this.$message.success("获取配置列表成功！")
          }
        })
      },
      addConfig(){

        this.dialogFormVisible2 = true
      },
      updateRSA(){
        this.$confirm('是否获取RSA秘钥对？','提示',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type:'warning'
        }).then(() => {
          var pbKey = ""
          var pvKey = ""
          var pbKeyId = ""
          var pvKeyId = ""
          this.$api.getUserKet().then(res => {
            if (res.code === '000000'){
              this.RSAInfo = true
              this.form2.publicKey = res.data.RSAPublicKey.encoded
              this.form2.privateKey = res.data.RSAPrivateKey.encoded
              this.$message.success("获取秘钥对成功！")
            }
          })
        }).catch(() => {
          this.$message({
            type:'info',
            message:'取消'
          })
        })
      },
      dialogFormVisible_esc(){
        this.dialogFormVisible = false
        this.$message.info('取消修改！')
      },
      dialogFormVisible_ok(){
        this.$api.saveConfig(this.form).then(res => {
          if (res.code==='000000'){
            this.$message.success('修改成功')
            this.dialogFormVisible = false
            this.refreshTable()
          }
        })
      },
      dialogFormVisible2_ok(){
        this.$api.saveConfig(this.form3).then(res => {
          if (res.code==='000000'){
            this.$message.success('修改成功')
            this.dialogFormVisible2 = false
            this.refreshTable()
          }
        })
      },
      dialogFormVisible2_esc(){
        this.dialogFormVisible2 = false
        this.$message.info('取消修改！')
      }
    }
  }
</script>

<style>
  .content-div {
    background-color: white;
    margin-top: 10px;
    margin-left: 20px;
    margin-right: 20px;
    margin-outside: 10px;
    height: 800px;

  }
  .button_div{

    margin-top: 30px;
    margin-left: 30px;
  }
</style>

